<template>
	<view>
		<text class="title" v-if="title">{{ title }}</text>
		<view>
			<view v-if="displayType == 2 && isAd == 1" class="ad" @click="adHandleLink"><image :src="ad.bannerUrl" mode="widthFix" class="adImage exposure" :data-id="sourceValue" :data-index="1" :data-type="sourceType" :data-moduleOrder="moduleOrder" :data-moduleType="'banner'"></image></view>
			<slide-item v-if="displayType == 2" :spuList="spuList" :sourceType="sourceType" :params="initializationParams" :moduleOrder="moduleOrder" :refModuleId="'1006'"></slide-item>
			<product-item v-else :spuList="spuList" :sourceType="sourceType" :moduleOrder="moduleOrder" :refModuleId="'1006'" :isShowAddCart="isShowAddCart"></product-item>
		</view>
		<spe-modal ref="speModal"></spe-modal>
		<load-more v-if="displayType != 2 && isLastModule" :status="loadMoreStatus"></load-more>
	</view>
</template>

<script>
import productItem from '../common/productItem.vue';
import slideItem from '../common/slideItem.vue';
import speModal from '@/components/speModal.vue'
import SearchRandom from '@/module/searchRandom'
const SRandom = new SearchRandom()
import Product from '@/module/product'
export default {
	inject:['exposure'],
	components: {
		productItem,
		slideItem,
		speModal
	},
	props: {
		initializationParams: {
			type: String,
			default: ''
		},
		fragmentId: {
			type: Number,
			default: 0
		},
		isLastModule: {
			type: Boolean,
			default: true
		},
		//来源模块在页面的排序序号
		moduleOrder: {
			type: [Number,String],
			default: 0
		}
	},
	computed:{
		cityInfo(){
			return uni.getStorageSync('eoc-good-city')? uni.getStorageSync('eoc-good-city'): this.$globalData.state.cityInfo.default
		}
	},
	data() {
		return {
			spuIdList: [],
			spuList: [],
			sourceType: '',
			sourceValue: '',
			displayType: 1, // 1 宫格 2左滑
			title: '',
			ad: {}, //广告数据
			isAd: 1, //是否展示广告 1是 2否
			pageNo: 1,
			pageSize: 12, //每页条数
			isLoadMore: true,
			loadMoreStatus: 'hide',
			requesting: false,
			isShowAddCart:false//是否显示购物车按钮
		};
	},
	created() {
		let initializationParams = JSON.parse(this.initializationParams);
		this.initParam = initializationParams
		this.sourceType = initializationParams.sourceType;
		this.sourceValue = initializationParams.sourceValue;
		this.displayType = initializationParams.displayType;
		this.title = initializationParams.title;
		this.ad = initializationParams.ad;
		this.isShowAddCart = initializationParams.showAddShoppingCar ? true:false
		if (initializationParams.isAd) {
			this.isAd = initializationParams.isAd;
		}
		this.querySpuInfo();
		try{
			this.exposure && this.exposure.push(this)
		}catch(e){
			//TODO handle the exception
		}
	},
	methods: {
		querySpuInfo() {
			let url = ''
			let data = {}
			let ifByIdList = false // 是否ID列表，前端进行ID分页
			if (this.sourceType == '201') {
				url = 'search/searchSpu'; // 1.23版本替换搜索接口
				data.categoryIdList = this.sourceValue; // 1.23版本替换搜索接口
			}  else if (this.sourceType == '202') {
				url = 'search/searchSpu';
				data.keyWord = this.sourceValue;
			} else if (this.sourceType == '203') {
				//商品id数组
				url = 'product/spu/list';
				ifByIdList = this.sourceValue
				data.idList = Product.searchProductByIdPaging(this.sourceValue, this.pageNo, this.pageSize)
			} else if (this.sourceType == '200') {
				//商品组
				url = 'operation/queryProductListByGroup';
				data.groupId = this.sourceValue;
			} else if (this.sourceType == '204') {
				// 会员专区
				url = 'marketing/queryVipAreaSpuIdList';
				data.activityId = this.sourceValue;
			} else if (this.sourceType == '205') {
				// 商品ip
				url = 'search/searchSpu';
				data.intellectualPropertyIdList = [this.sourceValue];
				data.fetchAdditionalInfo = 0;
			} else if (this.sourceType == '206') {
				// 内购活动
				url = 'marketing/queryWhiteListSpuIdList';
				data.activityId = this.sourceValue;
			} else if (this.sourceType == '207') {
				// 品牌
				url = 'search/searchSpu';
				data.brandIdList = [this.sourceValue];
				data.fetchAdditionalInfo = 0;
			} else if (this.sourceType == '208') {
				// 指定课程
				url = 'product/spu/list';
				ifByIdList = this.sourceValue
				data.idList = Product.searchProductByIdPaging(this.sourceValue, this.pageNo, this.pageSize)
			} else if (this.sourceType == '209') {
				// 指定课程
				url = 'product/spu/pageCourseSpu';
				data.courseCategoryIdList = this.sourceValue;
			} else if (this.sourceType == '210') {
				// 指定课程
				url = 'product/spu/pageCourseSpu';
				data.courseLabelList = this.sourceValue;
			} else if (this.sourceType == '211') {
				// 指定供应商
				url = 'search/searchSpu';
				data.supplierCode = [this.sourceValue];
				if (this.initParam.brandType == 2) data.brandIdList = this.initParam.brandIdList
				if (this.initParam.categoryType == 2) data.categoryIdList = this.initParam.categoryIdList
			}
			data.isRandom = this.initParam.isRandom || 0
			if (this.initParam.isShowNewGoods == 1) {
				// 新品专区
				data.showDay = this.initParam.showDay,
				data.isShowNewGoods = this.initParam.isShowNewGoods
				url = 'search/simpleSearchSpu'
			}
			// 请求PARAM拼接
			let params = {
				...data,
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			if (url == 'search/searchSpu' && data.isRandom) this.isRandom = 1
			let newCondiation = this.isRandom ? SRandom.formParam(params) : params
			let byIdListParam = ifByIdList ? { pageNo: 1 } : {} // 如果是ID列表查询，不改变newCondiation的值。
			if (this.requesting) return
			this.requesting = true
			this.$request(url, Object.assign({}, newCondiation, byIdListParam), 'api', false).then(data => {
				if (this.pageNo ==1) this.$bus.$emit('exposureInit')
				if (ifByIdList) data.total = ifByIdList.length
				this.loadMoreStatus = 'hide';
				// this.spuList = data.spuList;
				if (data.spuList == null) {
					//服务端返回null不做处理
					this.isLoadMore = false;
					this.loadMoreStatus = 'end';
					return;
				}
				data.spuList.forEach(pro => {
					let price = pro.minSalePrice / 100 + '';
					price = price.split('.');
					pro.interger = price[0];
					if (price[1]) {
						pro.fractional = price[1];
					}
					pro.salesCount = this.$utils.formatNum(pro.salesCount);
				})

				if (this.isRandom) {
					data.spuList = data.spuList.sort((a, b) => Math.random() > 0.5 ? -1 : 1)
					if (newCondiation.pageNo == 1) SRandom.initTotal(newCondiation.pageNo, newCondiation.pageSize, data.total)
				}

				this.spuList = newCondiation.pageNo == 1 ? data.spuList : this.spuList.concat(data.spuList)

				const randomLock = this.isRandom && newCondiation.pageNo == 101

				if ((params.pageNo * params.pageSize >= data.total) || randomLock) {
					this.isLoadMore = false;
					this.loadMoreStatus = 'end';
					this.pageNo++;
				} else {
					this.pageNo++;
				}
				const hasStockList = this.spuList.filter(spu => spu.haveStock)
				if (hasStockList.length < 6 && this.loadMoreStatus !== 'end') {
					this.requesting = false
					this.loadMore()
				}
			}).finally(() => this.requesting = false);
		}, //广告跳转
		adHandleLink() {
			this.$utils.handleLink(this.ad.linkType, this.ad.linkValue, {
				title: this.ad.title,
				isRandom: this.ad.isRandom,
				isShowNewGoods: this.ad.isShowNewGoods,
				showDay: this.ad.showDay
			});
		},
		loadMore() {
			if (this.isLoadMore) {
				this.querySpuInfo();
				this.loadMoreStatus = 'loading';
			}
		},
		openNormsModal(spuId){//打开购物弹窗
			this.$Login.checkLoginingblock(() => {
				if(this.$refs.speModal){
				  this.$refs.speModal.initData(spuId);
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	height: 104rpx;
	font-size: 36rpx;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	line-height: 104rpx;
	text-align: center;

	&::before {
		content: '';
		display: inline-block;
		width: 80rpx;
		height: 2rpx;
		background-color: #999;
		background: linear-gradient(to right, #f1f1f1, #999999);
		margin-right: 20rpx;
		vertical-align: middle;
	}

	&::after {
		content: '';
		display: inline-block;
		width: 80rpx;
		height: 2rpx;
		background-color: #999;
		background: linear-gradient(to left, #f1f1f1, #999999);
		margin-left: 20rpx;
		vertical-align: middle;
	}
}

.ad {
	// height: 280rpx;
	background: #f4f4f4;
	margin: 0 24rpx;
	margin-top: 32rpx;
	margin-bottom: 10rpx;

	.adImage {
		display: block;
	}
}
</style>
